<template>
	<view>
		<view class="dish_img">
			<image :src="menuitem.currentItem.picture" mode=""></image>
		</view>
		<view class="dish_det">
			<view>{{menuitem.currentItem.name}}</view>
			<view>{{menuitem.currentItem.discount}}折</view>
			<view class="dish_num">
				<view>
					<text>¥{{menuitem.currentItem.price}}</text>
					<text>/份</text>
				</view>
				<view class="specs">
					<button @click="open()">选规格</button>
					<uni-popup ref="popup" type="bottom">
						<view class="popo">
							<view class="www">
								<view class="specs_t">选规格</view>
								<view>
									<image
										src=" https://cdn3.axureshop.com/demo/2116044/images/%E5%A0%82%E9%A3%9F%E7%82%B9%E9%A4%90/u2329.jpg"
										mode="">
									</image>
								</view>
								<view class="pop_name">
									<text>{{menuitem.currentItem.name}}</text>
									<text>{{menuitem.currentItem.discount}}折</text>
								</view>
								<view class="heft">
									<text class="ttt">分量</text>
									<view class="ppp">
										<text @click="pfirst(0)" :id="b==0?'ppp1':''">{{heft_list[0]}}</text>
										<text @click="pfirst(1)" :id="b==1?'ppp1':''">{{heft_list[1]}}</text>
									</view>
								</view>
								<view class="sauce">
									<text class="ttt">酱汁</text>
									<view class="ppp">
										<text @click="psecond(0)" :id="a==0?'ppp1':''">{{sauce_list[0]}}</text>
										<text @click="psecond(1)" :id="a==1?'ppp1':''">{{sauce_list[1]}}</text>
										<text @click="psecond(2)" :id="a==2?'ppp1':''">{{sauce_list[2]}}</text>
									</view>
								</view>
							</view>
							<view class="specs_b">
								<text>￥{{sum}}</text>
								<text @click="join">加入购物车</text>
							</view>
						</view>

					</uni-popup>
				</view>
			</view>
		</view>
		<view class="dish_intro">
			<view>菜品介绍</view>
			<view>
				{{menuitem.currentItem.intruduce}}
			</view>
		</view>

		<view class="settle">
			<view class="settle_l">
				<view>
					<image
						src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u819.svg"
						mode=""></image>
					<view class="">{{menuitem.orderList.length}}</view>
				</view>
				<view>¥ {{sum}}</view>
			</view>
			<view class="settle_r" @click="goSettle()">
				去下单
			</view>
		</view>

		<!-- <uni-popup ref="popup2" type="bottom" v-if="orderList.length>0">
			<view class="car">
				<view class="car_t">
					<text>我的购物车({{goodNum}})</text>
					<view class="">
						<image
							src="https://cdn3.axureshop.com/demo/2116044/images/%E5%A0%82%E9%A3%9F%E7%82%B9%E9%A4%90/u2316.png"
							mode=""></image>
						<text>清空</text>
					</view>
				</view>
				<view class="car_lists">
					<view class="car_list" v-for="(v,i) in orderList" :key="v.id">
						<image
							:src="v.picture"
							mode=""></image>
						<view>
							<text>{{v.name}}</text>
							<view>
								<text>￥{{v.price}}</text>
								<view class="">
									<uni-icons @click="del(i,v.id)" type="minus" size="20"></uni-icons>
									<text>{{v.num}}</text>
									<uni-icons @click="add(i,v.id)" type="plus" size="20" color="#f77214"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuitem: {},
				a: 0,
				b: 0,
				heft_list: [
					'一人份',
					'两人份'
				],
				sauce_list: [
					'沙拉酱',
					'油醋汁',
					'千岛酱'
				],
				heft: '一人份',
				sauce: '沙拉酱',
				status: 1,
			}
		},
		methods: {
			goSettle() { //去下单
				if (this.status == 1) {
					let sendItem = {
						status: this.menuitem.state, //堂食为0，外卖为1
						orderList: this.menuitem.orderList, //购物车列表是个数组
						fee: this.menuitem.fee, //配送费
						number: this.menuitem.number, //就餐人数
						shopid: this.menuitem.shopid, //餐厅id
						sum: this.sum, //总金额
						goodNum: this.menuitem.goodNum, //商品数量
						discount: this.discount //折扣
					};
					uni.navigateTo({
						url: '/pages/settle/settle?sendItem=' + JSON.stringify(sendItem) //跳转结算页面并传值
					})
				} else {
					uni.navigateTo({
						uni: '' //跳转登录页面
					})
				}
			},
			join() {
				// console.log(this.menuitem.currentItem);
				const _orderList = this.menuitem.orderList;
				let a = 0;
				let b = 0;
				for (let i = 0; i < _orderList.length; i++) {
					// console.log(this.menuitem.currentItem.id);
					// console.log(_orderList[i].id);
					if (this.menuitem.currentItem.id == _orderList[i].id) {
						a = 1;
						b = i
					}
				};
				if (a == 0) {
					this.menuitem.currentItem.num += 1;
					_orderList.push(this.menuitem.currentItem);
				} else {
					_orderList[b].num += 1;
				};
				this.menuitem.orderList = _orderList;
				console.log('this.menuitem.orderList');
				console.log(this.menuitem.orderList);
			},
			pfirst(i) {
				this.b = i
				this.heft = this.heft_list[i];
				this.menuitem.currentItem.heft = this.heft
			},
			psecond(i) {
				this.a = i
				this.sauce = this.sauce_list[i];
			},
			back() {
				// let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				// let prevPage = pages[pages.length - 2]; //上一页页面实例
				// let data = this.menuitem.orderList;
				// uni.navigateBack({
				// 	delta: 1,
				// 	success: () => {
				// 		prevPage.$vm.backItem(data) // 给上一页绑定方法otherFun,传参地址id
				// 	}
				// })
				uni.navigateBack()
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// if(a==='first'){
				this.$refs.popup.open('bottom')
				// }else{
				// 	this.$refs.popup2.open('bottom')
				// }
			},


		},
		computed: {
			sum() {
				let sum = 0;
				let discount = 0;
				for (let i = 0; i < this.menuitem.orderList.length; i++) {
					discount += 0.1 * this.menuitem.orderList[i].discount * this.menuitem.orderList[i].price * this
						.menuitem.orderList[i].num
				}
				for (let i = 0; i < this.menuitem.orderList.length; i++) {
					sum += this.menuitem.orderList[i].num * this.menuitem.orderList[i].price;
				}
				sum = sum - discount;
				return sum;
			}
		},
		onLoad: function(options) {
			const menuitem = options.menuitem.replace(/""/g, "");
			this.menuitem = JSON.parse(menuitem);
			console.log('bbb');
			console.log(this.menuitem)

		},
		onUnload: function() {
			let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			let data = this.menuitem.orderList;
			uni.navigateBack({
				delta: 1,
				success: () => {
					prevPage.$vm.backItem(data) // 给上一页绑定方法otherFun,传参地址id
				}
			})
		},
		onShow() {
			this.status=uni.getStorageSync("status");
		}
	}
</script>



<style>
	.dish_img {
		width: 690rpx;
		height: 488rpx;
		margin: 30rpx;
	}

	.dish_img image {
		width: 690rpx;
		height: 488rpx;
	}

	.dish_det {
		width: 690rpx;
		height: 200rpx;
		padding: 0 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}

	.dish_det>view:nth-child(2) {
		width: 68rpx;
		font-size: 30rpx;
		padding: 10rpx;
		background: rgba(247, 114, 20, 0.0980392156862745);
		color: #F77214;
	}

	.dish_num {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dish_num>view:nth-child(1)>text:nth-child(2) {
		color: #999;
		font-size: 30rpx;
	}

	/* .dish_num view:nth-child(2) {
		height: 54rpx;
		padding: 0 20rpx;
		background: rgba(247, 114, 20, 1);
		color: #fff;
		font-size: 30rpx;
		border-radius: 27px;
		line-height: 54rpx;
	} */
	.specs button {
		height: 54rpx;
		line-height: 54rpx;
		background: rgba(247, 114, 20, 1);
		color: white;
		font-size: 30rpx;
		padding: 0 20rpx;
		border-radius: 27px;
	}

	.specs_t {
		padding: 30rpx;
		text-align: center;
		border-radius: 50rpx 50rpx 0 0;
	}

	.specs uni-popup view image {
		width: 690rpx;
		height: 390rpx;
		padding: 30rpx 30rpx;
	}




	.popo {
		background: white;
		border-radius: 40rpx 40rpx 0 0;
	}

	.www {
		height: 70vh;
		overflow: auto;
		padding-bottom: 100rpx;
	}

	.pop_name {
		padding: 0 30rpx;
	}

	.popo .pop_name text:nth-child(2) {
		width: 68rpx;
		font-size: 30rpx;
		padding: 10rpx;
		background: rgba(247, 114, 20, 0.0980392156862745);
		color: #F77214;
		margin-left: 20rpx;
	}

	.heft {
		padding: 40rpx 30rpx;
	}

	.sauce {
		padding: 0 30rpx 0 30rpx;
	}

	.ttt {
		margin-bottom: 30rpx;
		font-size: 35rpx;
	}

	#ppp1 {
		height: 30rpx;
		margin-right: 20rpx;
		background: rgba(247, 114, 20, 0.0980392156862745);
		color: rgb(247, 114, 20);
		padding: 15rpx;
		font-size: 33rpx;
		border-radius: 22rpx;
	}

	.ppp text {
		height: 30rpx;
		margin-right: 20rpx;
		background: rgba(239, 239, 239, 1);
		color: #999999;
		padding: 15rpx;
		font-size: 33rpx;
		border-radius: 22rpx;
	}

	.specs_b {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 650rpx;
		height: 90rpx;
		margin: 0 30rpx;
		padding: 0 20rpx;
		background-color: #F77214;
		position: fixed;
		bottom: 20rpx;
		border-radius: 45rpx;
		color: white;
	}

	.dish_intro {
		padding: 40rpx 30rpx 0 30rpx;
	}

	.dish_intro view:nth-child(1) {
		font-size: 35rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.dish_intro view:nth-child(2) {
		font-size: 30rpx;
		color: #999;
	}

	.settle {
		position: fixed;
		display: flex;
		/* justify-content: space-between; */
		/* padding: 0 30rpx; */
		width: 700rpx;
		height: 95rpx;
		bottom: 25rpx;
		left: 25rpx;
		border-radius: 47rpx;
		/* margin: 0 auto; */
		/* background: pink; */
	}

	.settle_l {
		display: flex;
		width: 450rpx;
		height: 95rpx;
		background: black;
		padding-left: 50rpx;
		border-radius: 47rpx 0 0 47rpx;
	}

	.settle_l view image {
		width: 48rpx;
		height: 48rpx;
		/* vertical-align: middle; */
	}

	.settle_l view:nth-child(1) {
		position: relative;
		padding: 23rpx 0;

	}

	.settle_l view:nth-child(1) view {
		position: absolute;
		background: white;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		right: -16rpx;
		top: 20rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 32rpx;
		color: #F77214;
	}

	.settle_l view:nth-child(2) {
		color: white;
		line-height: 95rpx;
		margin-left: 45rpx;
	}

	.settle_r {
		background: rgba(247, 114, 20, 1);
		width: 250rpx;
		border-radius: 0 47rpx 47rpx 0;
		color: white;
		text-align: center;
		line-height: 95rpx;
	}
</style>
